{% extends 'custom_base_site.html' %}
{% block chart %}
    <script src="/static/vue/vue.js"></script>

    <link rel="stylesheet" href="/static/vue-element/vue-element.css">
    <script src="/static/vue-element/vue-element.js"></script>

    <script src="/static/highcharts/highcharts.js"></script>
    <script src="/static/highcharts/highcharts-more.js"></script>
    <script src="/static/highcharts/modules/exporting.js"></script>
    <script src="/static/highcharts/modules/export-data.js"></script>
    <script src="/static/highcharts/modules/drilldown.js"></script>
    <script src="/static/highcharts/modules/oldie.js"></script>

    <script src="/static/moment/moment.min.js"></script>
    <link rel="stylesheet" href="/static/bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css">
    <script src="/static/bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js"></script>

    <link rel="stylesheet" href="/static/bootstrap-select/css/bootstrap-select.min.css">
    <script src="/static/bootstrap-select/js/bootstrap-select.min.js"></script>

    <script src="/static/html-util.js"></script>
    <script src="/static/string-format.js"></script>

    <!-- chart -->
    <div id="container" style="min-width:400px;height:400px"></div>
    <!-- chart end -->
    <div class="form-inline">
        <!-- store selector -->
        <select id="store-selector" class="selectpicker" data-width="fit">
            {% for store in stores %}
                <option data-tokens="{{ store.id | safe }}"
                        value="{{ store.id | safe }}">{{ store.title | safe }}</option>
            {% endfor %}
        </select>
        <script>
            // init set
            let store = "{{ store_selector_init.id | safe }}";  // amount interests
            $storeSelector = $("#store-selector");
            $storeSelector.selectpicker('val', store);
        </script>
        <!-- store selector end -->

    </div>
    <script type="text/javascript">
        $(function () {
        });
        let scheme = "",
            domain = "",
            base_url = "{scheme}{domain}".format({"scheme": scheme, "domain": domain}),
            bath_path = "/api-analysis/inventory",
            para_path = "/store/{store}".format({"store": store}),
            url = "{0}{1}{2}".format(base_url, bath_path, para_path);
        // scheme domain path     `https://`  `www.redfoxatasleep.com`  `/base/path`  `/para/path`  `?key=stringValue`


        let chart, chartOptions, min, max, response;
        $.get(url, function (data, status) {
            response = data;
            chartOptions = chart_option = {
                "chart": {
                    "zoomType": 'x',
                    "panning": true,
                    "panKey": 'shift',
                    "resetZoomButton": {
                        "position": {
                            "align": "left",
                            "verticalAlign": 'bottom', // by default
                            "x": -10,
                            "y": 10,
                        }
                    }
                },

                "title": {
                    "text": "Inventory"
                },

                "subtitle": {
                    "text": 'Click and drag to zoom in. Hold down shift key to pan.'
                },
                "plotOptions": {
                    "series": {
                        "dataLabels": {
                            "marker": true
                        }
                    }
                },

                "xAxis": [
                    {
                        "type": "category",
                        "title": "商品",
                    },
                    {
                        "type": 'datetime',
                        "title": "时间",
                        "dateTimeLabelFormats": {
                            "millisecond": '%Y-%m-%d %H:%M:%S.%L',
                            "second": '%Y-%m-%d %H:%M:%S',
                            "minute": '%Y-%m-%d %H:%M',
                            "hour": '%Y-%m-%d %H:%M',
                            "day": '%Y-%m-%d',
                            "week": '%m-%d',
                            "month": '%Y-%m',
                            "year": '%Y'
                        }
                    },
                ],

                "yAxis": {},

                "legend": {
                    "enabled": false,
                },

                "tooltip": {
                    "dateTimeLabelFormats": {
                        "millisecond": '%Y-%m-%d %H:%M:%S.%L',
                        "second": '%Y-%m-%d %H:%M:%S',
                        "minute": '%Y-%m-%d %H:%M',
                        "hour": '%Y-%m-%d %H:%M',
                        "day": '%Y-%m-%d',
                        "week": '%m-%d',
                        "month": '%Y-%m',
                        "year": '%Y'
                    }
                },
                "series": response["series"],
                "drilldown": response["drilldown"],

            };
            chart = Highcharts.chart('container', chartOptions);
        });

        $storeSelector.on(
            'changed.bs.select',
            function (e, clickedIndex, isSelected, previousValue) {
                chart.drillUp();
                let selectedOption = event.target[clickedIndex];
                store = selectedOption.value;
                // event.date instanceof moment === true
                para_path = "/store/{store}".format({"store": store});
                url = "{0}{1}{2}".format(base_url, bath_path, para_path);
                $.get(url, function (data, status) {
                    // data: response from server
                    chart.update({
                        "series": data["series"],
                        "drilldown": data["drilldown"],
                    })
                });

            }
        );
    </script>


{% endblock %}